<template>
    <div ref="chartContainer" style="width: 100%; height: 100%;"></div>
</template>

<script>
import 'echarts-gl'
import { createChartOption } from './option.js'; // 确保路径正确
import * as echarts from 'echarts'

export default {
    props: {
        Data: {
            type: Array,
            required: true
        }
    },
    data() { 
        return {
            chartInstance2: null,
            resizeObserver: null,
            optionsData: [
                { name: '鱿鱼', value: 2000, itemStyle: { color: 'rgba(179,229,251,1)' } },
                { name: '金枪鱼', value: 1000, itemStyle: { color: 'rgba(250,210,95,1)' } },
                { name: '秋刀鱼', value: 100, itemStyle: { color: 'rgba(249,170,114,1)' } },
                { name: '鲣鱼', value: 200, itemStyle: { color: 'rgba(79,191,227,1)' } }
            ]
        };
    },
    watch: {
        Data:{
            // 更新数据
            // handler(newData) {
            //     console.log(newData);
            //     this.updateData(newData);
            // },
            deep: true
        }
    },
    mounted() {
        if (this.$refs.chartContainer) {
            this.chartInstance2 = echarts.init(this.$refs.chartContainer,this.$echartsConfig.theme);
            // option && this.chartInstance2.setOption(option, true);
            this.updateChart(); // 更新图表数据
            this.resizeObserver = new ResizeObserver(() => {
                this.chartInstance2 && this.chartInstance2.resize();
            });
            this.resizeObserver.observe(this.$refs.chartContainer);
        }
    },
    methods: {
        updateChart() {
            const option = createChartOption(this.optionsData);
            this.chartInstance2 && this.chartInstance2.setOption(option, true);
        },
        updateData(newData) {
            this.optionsData = newData;
            this.updateChart();
        }
    },
    beforeDestroy() {
        if (this.chartInstance2) {
            this.chartInstance2.dispose();
        }
        if (this.resizeObserver && this.$refs.chartContainer) {
            this.resizeObserver.unobserve(this.$refs.chartContainer);
            this.resizeObserver.disconnect();
        }
    }
};
</script>